<template>
  <view class="">
    <view class="nav">
      <view class="header">
        <view class="tex">
          <text>财富</text>
        </view>
        <view class="ipt">
          <image src="https://z3.ax1x.com/2021/04/23/cXNWHU.png" mode=""></image>
          <input type="text" value="" placeholder="搜索相关信息" />
        </view>
        <view class="message">
          <image src="https://z3.ax1x.com/2021/04/23/cXNhEF.png" mode=""></image>
        </view>
        <view class="money">
          <image src="https://z3.ax1x.com/2021/04/23/cXNRBT.png" mode=""></image>
        </view>
      </view>
      <view class="stat">
        <view class="box">
          <view class="box1">
            <text>总资产</text>
            <text>最新收益</text>
          </view>
          <view class="box2">
            <text>0.00</text>
            <text>0.00</text>
          </view>
        </view>
      </view>
      <view class="list">
        <view class="" @click="current">
          <image src="https://z3.ax1x.com/2021/05/07/g1s8VP.png" mode=""></image>
          <view class=""> 活期 </view>
        </view>
        <view class="" @click="jumpRegular">
          <image src="https://z3.ax1x.com/2021/04/23/cXNtjP.png" mode=""></image>
          <view class=""> 定期 </view>
        </view>
        <view class="" @click="channel">
          <image src="https://z3.ax1x.com/2021/04/23/cXNaB8.png" mode=""></image>
          <view class=""> 基金 </view>
        </view>
        <view class="" @click="gold">
          <image src="https://z3.ax1x.com/2021/04/23/cXNUnf.png" mode=""></image>
          <view class=""> 黄金 </view>
        </view>
        <view class="">
          <image src="https://z3.ax1x.com/2021/04/23/cXNBNQ.png" mode=""></image>
          <view class=""> 股票 </view>
        </view>
        <view class="">
          <image src="https://z3.ax1x.com/2021/04/23/cXNcj0.png" mode=""></image>
          <view class=""> 稳健精选 </view>
        </view>
        <view class="">
          <image src="https://z3.ax1x.com/2021/04/23/cXN6cq.png" mode=""></image>
          <view class=""> 天天利财 </view>
        </view>
        <view class="">
          <image src="https://z3.ax1x.com/2021/04/23/cXNy3n.png" mode=""></image>
          <view class=""> 基金投顾 </view>
        </view>
        <view class="">
          <image src="https://z3.ax1x.com/2021/04/23/cXNs9s.png" mode=""></image>
          <view class=""> 我的理财 </view>
        </view>
        <view class="">
          <image src="https://z3.ax1x.com/2021/04/23/cXNDhj.png" mode=""></image>
          <view class=""> 高端理财 </view>
        </view>
      </view>
    </view>
    <view class="content">
      <view class="titles">
        <view class="left"> </view>
        <view class="right"> 行情 </view>
      </view>
      <view class="index">
        <view class="top">
          <view class="no1">
            <view class="no2">深圳指数</view>
            <view class="no3">14828.80</view>
            <view class="no4">
              <text>-42.86</text>
              <text>-0.28%</text>
            </view>
          </view>
          <view class="no1">
            <view class="no2">上证指数</view>
            <view class="no3">14828.80</view>
            <view class="no4">
              <text>-42.86</text>
              <text>-0.28%</text>
            </view>
          </view>
          <view class="no1">
            <view class="no2">创业指数</view>
            <view class="no3">14828.80</view>
            <view class="no4">
              <text>-42.86</text>
              <text>-0.28%</text>
            </view>
          </view>
        </view>
        <view class="bottom">
          <view class="bot1">
            <image src="https://z3.ax1x.com/2021/04/23/cXN4N4.png" mode=""></image>
            <text>新春福利 速领50元红包</text>
          </view>
          <view class="bot1">
            <image src="https://z3.ax1x.com/2021/04/23/cXN2uV.png" mode=""></image>
            <text>福利：领1288元红包</text>
          </view>
        </view>
      </view>
      <view class="imgs">
        <swiper class="banner" autoplay="true" interval="3000" circular="true">
          <swiper-item v-for="(item, index) in banners" :key="index">
            <image :src="item"></image>
          </swiper-item>
        </swiper>
      </view>
      <view class="fund">
        <view class="fund1"> </view>
        <view class="fund2"> 基金投顾 </view>
      </view>
      <view class="funddata">
        <view class="fundleft">
          <view class="fundleft1"> 智能投顾 </view>
          <view class="fundleft2"> 测一测适合哪种组合 </view>
          <view class="fundleft3"> 精心打造 专属方案 </view>
          <view class="fundleft4"> 去测评> </view>
        </view>
        <view class="fundleft">
          <view class="fundleft1"> 追求高收益 </view>
          <view class="fundleft2"> 南方股债轮动进取组合 </view>
          <view class="fundleft3"> 近一年收益59.15% </view>
          <view class="fundleft4"> 查看详情> </view>
        </view>
      </view>
      <view class="hot">
        <view class="hot1"></view>
        <view class="hot2">热门基金</view>
      </view>
      <view>
        <view class="top-tabbar">
          <view
            @tap="viewTabBtn(index)"
            class="tabbar-item"
            :class="{ active: start == index }"
            v-for="(item, index) in swiperTab"
            :key="item"
          >
            <text>{{ item }}</text>
          </view>
        </view>
        <swiper class="swiper-tab" :current="start" @change="tabchange">
          <swiper-item>
            <view class="swiper-item">
              <view class="swiper-item1">
                <view class="swiper-top">
                  <view class="swiper-top1">广发资源优选A股</view>
                  <view class="swiper-top2">政策利好</view>
                </view>
                <view class="swiper-button">
                  <view class="swiper-button1">
                    <view class="swiper1">88.23%</view>
                    <view class="swiper2">近一年收益率</view>
                  </view>
                  <view class="swiper-button1">
                    <view class="swiper3">前5%</view>
                    <view class="swiper4">同类排名</view>
                  </view>
                  <view class="swiper-button1">
                    <view class="swiper3">周期行业</view>
                    <view class="swiper4">大宗商品 库存低位</view>
                  </view>
                </view>
              </view>
              <view class="swiper-item1">
                <view class="swiper-top">
                  <view class="swiper-top1">南方新优享混合</view>
                  <!-- <view class="swiper-top2">政策利好</view> -->
                </view>
                <view class="swiper-button">
                  <view class="swiper-button1">
                    <view class="swiper1">55.30%</view>
                    <view class="swiper2">近一年收益率</view>
                  </view>
                  <view class="swiper-button1">
                    <view class="swiper3">前10%</view>
                    <view class="swiper4">同类排名</view>
                  </view>
                  <view class="swiper-button1">
                    <view class="swiper3">大国制造</view>
                    <view class="swiper4">基建制造 转型升级</view>
                  </view>
                </view>
              </view>
              <view class="swiper-item1">
                <view class="swiper-top">
                  <view class="swiper-top1">汇添富双利债券A</view>
                  <view class="swiper-top2">政策利好</view>
                </view>
                <view class="swiper-button">
                  <view class="swiper-button1">
                    <view class="swiper1">79.36%</view>
                    <view class="swiper2">近一年收益率</view>
                  </view>
                  <view class="swiper-button1">
                    <view class="swiper3">前10%</view>
                    <view class="swiper4">同类排名</view>
                  </view>
                  <view class="swiper-button1">
                    <view class="swiper3">长青板块</view>
                    <view class="swiper4">白酒+消费内循环</view>
                  </view>
                </view>
              </view>
            </view>
          </swiper-item>
          <swiper-item>
            <view class="swiper-item">暂无内容...</view>
          </swiper-item>
          <swiper-item>
            <view class="swiper-item">暂无内容...</view>
          </swiper-item>
          <swiper-item>
            <view class="swiper-item">暂无内容...</view>
          </swiper-item>
        </swiper>
      </view>
    </view>
    <view class="tail">
      <view class="tes"> 加载更多... </view>
    </view>
  </view>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
const { mapActions, mapState, mapMutations } = createNamespacedHelpers(
  "fortune"
);

export default {
  data() {
    return {
      swiperTab: ["推荐", "稳健之选", "长跑之选", "港股精选"],
      start: 0,
      banners: [
        "https://z3.ax1x.com/2021/04/23/cXN0Ag.png",
        "https://z3.ax1x.com/2021/04/23/cXN0Ag.png",
        "https://z3.ax1x.com/2021/04/23/cXN0Ag.png",
      ],
    };
  },

  methods: {
    
    viewTabBtn(index) {
      this.start = index;
    },
    tabchange(e) {
      this.start = e.target.current;
    },
    //跳转定期
    jumpRegular() {
      uni.navigateTo({
        url: "../regularbas/regularbas",
      });
    },
    //跳转活期
    current() {
      uni.navigateTo({
        url: "../current/current",
      });
    },
    //跳转基金
    channel() {
      uni.navigateTo({
        url: "../channel/channel",
      });
    },
    //跳转黄金
    gold() {
      uni.navigateTo({
        url: "../gold/gold",
      });
    },
  },
};
</script>

<style>
.nav {
  width: 100%;
  /* height: 20rpx; */
  background-color: #3476f1;
}

.tex {
  color: #ffffff;
  font-size: 42rpx;
  font-weight: 600;
}

.header {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 60rpx;
  /* border: 1px solid red; */
}

.ipt {
  margin-left: 24rpx;
  border-radius: 30rpx;
  font-size: 24rpx;
  display: flex;
  align-items: center;
  height: 100%;
  width: 450rpx;
  background-color: #ffffff;
}

.ipt image {
  margin-left: 16rpx;
  width: 30rpx;
  height: 30rpx;
}

.ipt input {
  margin-left: 16rpx;
  height: 100%;
  width: 350rpx;
  font-size: 24rpx;
  color: #cccccc;
}

.message {
  margin-left: 24rpx;
  width: 48rpx;
  height: 48rpx;
}

.message image {
  width: 100%;
  height: 100%;
}

.money {
  margin-left: 24rpx;
  width: 48rpx;
  height: 48rpx;
}

.money image {
  width: 100%;
  height: 100%;
}

.stat {
  margin-top: 40rpx;
  width: 100%;
  height: 188rpx;
  background-color: #ffe3c0;
  border-top-left-radius: 50rpx;
  display: flex;
  justify-content: center;
}

.list {
  padding-top: 40rpx;
  margin-top: -40rpx;
  width: 100%;
  background-color: white;
  height: 320rpx;
  border-top-left-radius: 50rpx;
  display: flex;
  flex-wrap: wrap;
}

.list view {
  margin-top: 14rpx;
  width: 150rpx;
  height: 160rpx;
  font-size: 24rpx;
  text-align: center;
}

.list view image {
  width: 64rpx;
  height: 64rpx;
}

.box {
  margin-top: 42rpx;
}

.box1 {
  display: flex;
  justify-content: space-between;

  width: 450rpx;
  height: 40rpx;
  font-size: 24rpx;
}

.box2 {
  display: flex;
  justify-content: space-between;
  width: 450rpx;
  height: 40rpx;
  font-size: 36rpx;
  font-weight: 500;
}

.box2 text {
  margin-right: 17rpx;
}

.content {
  padding: 24rpx;
}

.content .left {
  width: 8rpx;
  height: 38rpx;
  line-height: 30rpx;
  background: #3476f1;
  opacity: 1;
  border-radius: 6rpx;
  margin-top: 10rpx;
}

.content .right {
  font-weight: 600;
  font-size: 36rpx;
  margin-left: 12rpx;
}

.content .titles {
  display: flex;
  align-items: center;
  width: 100%;
  height: 38rpx;
}

.content .index {
  margin-top: 20rpx;
  width: 100%;
  height: 260rpx;
  border-radius: 8rpx;
  box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.05);
}

.index .top {
  display: flex;
  text-align: center;
  height: 176rpx;
  width: 100%;
  border: 1pxs solid #4cd964;
}

.index .top .no1 {
  width: 234rpx;
  height: 100%;
}

.index .top .no2 {
  margin-top: 28rpx;
  font-size: 28rpx;
  font-weight: 500;
}

.index .top .no3 {
  margin-top: 20rpx;
  font-size: 36rpx;
  font-weight: 600;
  color: #f85656;
}

.index .top .no4 {
  margin-top: 10rpx;
  font-size: 24rpx;
  color: #f85656;
}

.index .bottom {
  margin-top: 10rpx;
  margin-left: 23rpx;
  height: 58rpx;
  width: 654rpx;
  display: flex;
  align-items: center;
  background-color: rgba(52, 118, 241, 0.1);
  border-radius: 8rpx;
}

.index .bottom .bot1 {
  width: 327rpx;
  height: 30rpx;
  margin-left: 24rpx;
  display: flex;
  align-items: center;
}

.index .bottom .bot1 image {
  width: 30rpx;
  height: 30rpx;
}

.index .bottom .bot1 text {
  font-size: 24rpx;
  margin-left: 10rpx;
  font-weight: 600;
}

.content .imgs {
  margin-top: 40rpx;
  width: 100%;
  height: 180rpx;
}

.content .imgs image {
  width: 100%;
  height: 180rpx;
}

.content .fund {
  margin-top: 40rpx;
  display: flex;
  align-items: center;
  width: 100%;
  height: 38rpx;
}

.content .fund1 {
  width: 8rpx;
  height: 38rpx;
  line-height: 30rpx;
  background: #3476f1;
  opacity: 1;
  border-radius: 6rpx;
  margin-top: 10rpx;
}

.content .fund2 {
  font-weight: 600;
  font-size: 36rpx;
  margin-left: 12rpx;
}

.content .funddata {
  width: 100%;
  height: 268rpx;
  margin-top: 20rpx;
  display: flex;
  justify-content: space-between;
}

.content .funddata .fundleft {
  border-radius: 8rpx;
  width: 304rpx;
  height: 100%;
  box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.05);
  padding-left: 30rpx;
}

.content .funddata .fundleft .fundleft1 {
  width: 120rpx;
  height: 36rpx;
  text-align: center;
  line-height: 36rpx;
  color: #3476f1;
  border-radius: 4rpx;
  font-size: 20rpx;
  margin-top: 30rpx;
  background-color: rgba(52, 118, 241, 0.1);
}

.content .funddata .fundleft .fundleft2 {
  margin-top: 22rpx;
  font-size: 28rpx;
  font-weight: 500;
}

.content .funddata .fundleft .fundleft3 {
  font-size: 24rpx;
  margin-top: 10rpx;
  color: #999999;
}

.content .funddata .fundleft .fundleft4 {
  margin-top: 36rpx;
  font-size: 28rpx;
  font-weight: 500;
}

.content .hot {
  margin-top: 40rpx;
  display: flex;
  align-items: center;
  width: 100%;
  height: 38rpx;
}

.content .hot1 {
  width: 8rpx;
  height: 38rpx;
  line-height: 30rpx;
  background: #3476f1;
  opacity: 1;
  border-radius: 6rpx;
  margin-top: 10rpx;
}

.content .hot2 {
  font-weight: 600;
  font-size: 36rpx;
  margin-left: 12rpx;
}

.top-tabbar {
  display: flex;
  justify-content: space-between;
  margin-top: 24rpx;
}

.top-tabbar .tabbar-item {
  color: #999999;
  font-size: 24rpx;
  width: 130rpx;
  height: 48rpx;
  line-height: 48rpx;
  margin-right: 40rpx;
  text-align: center;
}

.top-tabbar .active {
  color: #ffffff;
  background-color: #3476f1;
  font-size: 28rpx;
  font-weight: 600;
  border-radius: 4rpx;
}

.swiper-tab {
  height: 610rpx;
  box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.05);
  margin-top: 20rpx;
  padding: 30rpx;
}

.swiper-item1 {
  width: 700rpx;
  height: 188rpx;
  border-bottom: 0.2rpx solid #c0c0c0;
}

.swiper-top {
  display: flex;
  margin-top: 20rpx;
}

.swiper-top .swiper-top1 {
  font-size: 32rpx;
  font-weight: 600;
}

.swiper-top .swiper-top2 {
  margin-left: 10rpx;
  font-size: 20rpx;
  width: 102rpx;
  height: 34rpx;
  text-align: center;
  line-height: 34rpx;
  background-color: #fcf5ec;
  color: #be7f22;
}

.swiper-button {
  width: 100%;
  height: 142rpx;
  display: flex;
}

.swiper-button .swiper-button1 {
  width: 210rpx;
}

.swiper-button .swiper-button1 .swiper1 {
  font-size: 44rpx;
  color: #f85656;
  margin-top: 26rpx;
  font-weight: 600;
}

.swiper-button .swiper-button1 .swiper2 {
  margin-top: 14rpx;
  font-size: 24rpx;
  color: #999999;
}

.swiper-button .swiper-button1 .swiper3 {
  font-size: 32rpx;
  margin-top: 35rpx;
  font-weight: 600;
}

.swiper-button .swiper-button1 .swiper4 {
  margin-top: 18rpx;
  font-size: 24rpx;
  color: #999999;
}

.tail .tes {
  margin: 40rpx auto;
  width: 750rpx;
  height: 60rpx;
  font-size: 24rpx;
  color: #999999;
  font-weight: 600;
  text-align: center;
  line-height: 60rpx;
}
</style>
